<template>
  
  <div class="box">
    <header v-if="$myRoute.meta.is_header" class="header">
    <!-- 顶部 -->
    </header>
  <article>
    <!-- 内容 -->
    <router-view></router-view>
  </article>
  <footer v-if="$myRoute.meta.is_footer">
    <!-- 底部 -->
    <SdyFooter></SdyFooter>
  </footer>
  </div>
 
</template>
<script lang="ts" setup>
//导入底部组件
import SdyFooter from './components/footer.vue'
//顶部组件

import { useRoute } from 'vue-router'
const $myRoute = useRoute()
</script>

<style name="fjdApp" scoped lang="scss">
.box{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  header{
    height: 46px;
    background-color: #50bb78;
    overflow: hidden;
}
article{
    flex: 1;
    width: 100%;
    overflow: auto;
  }
  footer{
    height: 50px;
    background-color: #ccc;
  }
}
</style>
